<template>
    <div>
      <div id="month">
        <el-form>
          <h1 style="font-size: 40px;font-weight: bold;margin-bottom: 110px;">数据统计</h1>
          <el-row style="margin: 60px;">
                <el-col :span="8">
                    <el-form-item label="请选择月份">
                    <el-date-picker
                        v-model="value"
                        type="month"
                        placeholder="选择月"
                    >
                    </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item  label="选择角色">
                        <el-select v-model="selectRole" @change="getRole">
                            <el-option
                                v-for="item in roleData"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" @click="selectMonth">查询</el-button>
                </el-col>
        </el-row>
        </el-form>
      </div>
      <!-- 图像 -->
      <div class="chart-container">
        <div v-if="!echartsData.xAxis.length ||!echartsData.yAxis.length ||!echartsData.title">
            <p style="font-size: 30px;">当前暂无数据，请选择月份查询。</p>
        </div>
        <Echarts v-else :echartsData="echartsData" :chartStyle="chartStyle" />
      </div>

    </div>
  </template>
  
  <script>
  import { formatDate } from '@/api/didi/utils/dateUtils';
  import Echarts from '@/views/didi/components/echarts/index.vue';
  import {dataGrowth} from "@/api/didi/data.js";
  export default {
    components: {
      Echarts
    },
    data() {
      return {
        value: '',
        allTime: '',
        data: {
          year: '',
          month: '',
          table: ""
        },
        chartStyle: {
          width: '1500px',
          height: '650px',
          border: '1px solid black',
          padding: '20px'
        },
        echartsData:{
            xAxis:[],
            yAxis:[],
            title:"",
            xName:"日期",
            yName:"注册量",
            explain:""
        },
        role:"",
        selectRole:"",
        roleData: [
        {
          value: "1",
          label: "用户"
        },
        {
          value: "2",
          label: "司机"
        }
      ],

      };
    },
    methods: {
     //选择角色
      getRole(value){
          if(value==1){
             this.data.table="t_user";
             this.role="用户";
          }
          if(value==2){
             this.data.table="t_driver"
             this.role="司机";
          }
      },
     //日期转化
      formattedDate(date) {
        return formatDate(date);
      },
      //获取数据
      selectMonth() {
        this.reset();
        if (!this.value) {
          this.$message.error('请选择一个月份');
          return;
        }
        if (!this.data.table) {
          this.$message.error('请选择一个角色');
          return;
        }
        this.allTime = this.formattedDate(this.value);
        const [year, month] = this.allTime.split('-');
        this.data.year = year;
        this.data.month = month;
        dataGrowth(this.data).then(response => {
            if(response.rows.length>0){
                this.echartsData.xAxis = response.rows.map(item => item.newCount);
                this.echartsData.yAxis = response.rows.map(item => item.createDate);
                const total = response.rows.reduce((acc, item) => {
                    // 将 item.newCount 转换为数值类型
                    const countValue = parseFloat(item.newCount);
                    return acc + countValue;
                }, 0)
                this.echartsData.explain="总新注册量: "+total+"位"
                this.echartsData.title = this.allTime+" 的"+this.role+"注册量"
            }else{
                this.$message.error('本月份没有新注册量，请重新选择月份');
            }

        })
      },
      // 表单重置
      reset() {
        this.echartsData={
            xAxis:[],
            yAxis:[],
            title:"",
            xName:"日期",
            yName:"注册量"
        }
      }
    }
  };
  </script>
  
  <style scoped>
  #month {
    width: 1200px;
    margin: 50px;
  }
  .chart-container {
    position: relative;
    min-height: 100vh; /* 确保父容器至少占满视口高度 */
    left: 10%;
    /* transform: translate(-30%, 0%); */
}
  </style>    